<template>
  <section id="iLayout">
    <section class="head">
      <section class="title">
        <slot name="title"></slot>
      </section>
      <section class="operation">
        <slot name="operation"></slot>
      </section>
    </section>

    <section class="middle">
      <section class="left" :style="`flex:${switchState?1:0};min-width:${switchState?'12rem':'0'};${switchState?'padding: 0.5rem 0.4rem':''}`" v-if="left">
        <section class="body">
          <slot name="left"></slot>
        </section>
      </section>
      <section class="right">
        <section class="body">
          <slot name="right"></slot>
        </section>
        <section v-if="left" class="switchBox" @click="()=>{switchState = !switchState}">
          <div v-show="switchState">
            <i class="el-icon-arrow-left"></i>
          </div>
          <div v-show="!switchState">
            <i class="el-icon-arrow-right"></i>
          </div>
        </section>
      </section>
    </section>
    <slot></slot>
  </section>
</template>

<script>
export default {
  props: {
    left: {
      type: Boolean,
      required: false
    },
    foot: {
      type: Boolean,
      required: false
    }
  },
  data() {
    return {
      switchState: true
    }
  }
}
</script>

<style lang="scss" scoped>
#iLayout {
  width: 100%;
  height: 100%;
  position: relative;

  .head {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    overflow: hidden;
    overflow-x: auto;

    .title {
      font-size: 1.4rem;
      font-weight: bold;
      white-space: nowrap;
    }

    .operation {
    }
  }

  .middle {
    width: 100%;
    height: calc(100% - 3rem);
    display: flex;
    align-content: stretch;

    & > section {
      box-sizing: border-box;
      border-radius: 0.5rem;
      box-shadow: inset 0 0 0.3rem rgba(0, 0, 0, 0.2), inset 0 0 0.1rem rgba(0, 0, 0, 0.1);
    }

    .left {
      transition: 0.3s;
      flex: 1;
      // min-width: 12rem;
      height: 100%;
      // padding: 0.5rem 0.4rem;
      margin-right: 0.75rem;
      overflow: hidden;

      .body {
        height: 100%;
        box-sizing: border-box;
        padding: 0.2rem 0.25rem;
        overflow-y: auto;
      }
    }

    .right {
      position: relative;
      flex: 5;
      padding: 0.75rem 0.6rem;
      padding: 0.5rem 0.4rem;
      padding-left: 15px;
      overflow: hidden;

      .body {
        height: 100%;
        box-sizing: border-box;
        padding: 0.2rem 0.25rem;
        overflow-y: auto;
      }
      .switchBox {
        border-radius: 3px;
        position: absolute;
        border: 1px solid rgb(187, 187, 187);
        background: #fff;
        top: 50%;
        left: 5px;
        transform: translateY(-200%);
      }
      .switchBox:hover {
        background: rgb(212, 212, 212);
        color: #fff;
      }
    }
  }
}
</style>
